<div class="widgets">

  <div class="row">
    <div class="col-md-12"
         ba-panel
         ba-panel-title="Modals"
         ba-panel-class="with-scroll">
      <div class="modal-buttons clearfix">
        <button type="button" class="btn btn-primary" data-toggle="modal" ng-click="open('app/pages/ui/modals/modalTemplates/basicModal.html', 'md')">Default modal</button>
        <button type="button" class="btn btn-success" data-toggle="modal" ng-click="open('app/pages/ui/modals/modalTemplates/largeModal.html', 'lg')">
          Large modal
        </button>
        <button type="button" class="btn btn-warning" data-toggle="modal" ng-click="open('app/pages/ui/modals/modalTemplates/smallModal.html', 'sm')">
          Small modal
        </button>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6"
         ba-panel
         ba-panel-title="Message Modals"
         ba-panel-class="with-scroll">
      <div class="modal-buttons same-width clearfix">
        <button type="button" class="btn btn-success" data-toggle="modal" ng-click="open('app/pages/ui/modals/modalTemplates/successModal.html')">
          Success Message
        </button>
        <button type="button" class="btn btn-info" data-toggle="modal" ng-click="open('app/pages/ui/modals/modalTemplates/infoModal.html')">Info Message</button>
        <button type="button" class="btn btn-warning" data-toggle="modal" ng-click="open('app/pages/ui/modals/modalTemplates/warningModal.html')">
          Warning Message
        </button>
        <button type="button" class="btn btn-danger" data-toggle="modal" ng-click="open('app/pages/ui/modals/modalTemplates/dangerModal.html')">
          Danger Message
        </button>
      </div>
    </div>
    <div class="col-md-6"
         ba-panel
         ba-panel-title="Notifications"
         ba-panel-class="with-scroll">
      <div ng-include="'app/pages/ui/modals/notifications/notifications.html'"></div>
    </div>
  </div>

</div>
